<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
  <nav class="navigation">
    <ul >
      <li class="list active" style="--clr:#f44336"><a href="#"> <span class="icon"><ion-icon name="home-outline"></ion-icon></span></a></li>
      <li class="list" style="--clr:#ffa117" ><a href="#"> <span class="icon"><ion-icon name="person-outline"></ion-icon></span></a></li>
      <li class="list" style="--clr:#0fc70f"><a href="#"> <span class="icon"><ion-icon name="chatbubble-outline"></span></ion-icon></a></li>
      <li class="list" style="--clr:#2196f3"><a href="#"> <span class="icon"><ion-icon name="settings-outline"></ion-icon></span></a></li>
      <li class="list" style="--clr:#b145e9"><a href="#"> <span class="icon"><ion-icon name="camera-outline"></ion-icon></span></a></li>
      <div class="indicator"></div>
    </ul>
  </nav>

  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script>
    const list  =  document.querySelectorAll(".list");
    
  
    function activeLink(){
        console.log("1");
      list.forEach((element) => 
       element.classList.remove('active')
      );
      this.classList.add('active');
    } 

    list.forEach((element) => 
      element.addEventListener('click',activeLink)    
    );


  </script>
</body>
</html>